<template>
  <el-card v-if="main" :header="main.Show">
    <el-form label-width="130px">
      <el-row :gutter="24">
        <el-col v-for="item in main.Column" :key="item.Id" :md="item.ColSet && item.ColSet.IsRow ? 24 : 12" :sm="24">
          <el-form-item :label="item.Label">
            <span v-if="item.FuncType !=5">{{ row[item.Name] }}</span>
            <fileView v-else :file-key="item.ColSet.DirKey" :link-biz-pk="linkBizPk" :is-load="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="main.Group">
        <queryGroup v-for="g in main.Group" :key="g.Id" :group="g" :row="row" />
      </template>
    </el-form>
  </el-card>
</template>

<script>
import moment from 'moment'
import queryGroup from './queryGroupView.vue'
import fileView from '@/components/file/fileView.vue'
export default {
  components: {
    queryGroup,
    fileView
  },
  props: {
    table: {
      type: Object,
      default: null
    },
    linkBizPk: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      main: null,
      row: null,
      colList: [],
      colAlign: {
        0: 'left',
        1: 'center',
        2: 'right'
      }
    }
  },
  computed: {},
  watch: {
    table: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      const main = {
        Show: this.table.Show,
        Column: [],
        Group: []
      }
      this.table.Column.forEach(c => {
        if (c.Children && c.Children.length > 0) {
          const g = this.formatGroup(c)
          main.Group.push(g)
        } else {
          this.colList.push(c)
          main.Column.push(c)
        }
      })
      this.row = this.formatRow(this.table.Row, this.colList)
      this.main = main
    },
    formatGroup(group) {
      const t = {
        Id: group.Id,
        Label: group.Label,
        Column: [],
        Children: []
      }
      group.Children.forEach(c => {
        if (c.Children && c.Children.length > 0) {
          const g = this.formatGroup(c)
          t.Group.push(g)
        } else {
          this.colList.push(c)
          t.Column.push(c)
        }
      })
      return t
    },
    formatRow(row, cols) {
      cols.forEach((c) => {
        const val = row[c.Name]
        if (val == null) {
          return
        }
        if (c.DataType === 5) {
          if (val === true) {
            if (c.ColSet == null) {
              row[c.Name] = '是'
            } else {
              row[c.Name] = c.ColSet.ActiveText ? c.ColSet.ActiveText : '是'
            }
          } else {
            if (c.ColSet == null) {
              row[c.Name] = '否'
            } else {
              row[c.Name] = c.ColSet.InactiveText
                ? c.ColSet.InactiveText
                : '否'
            }
          }
        } else if (c.DataType === 3 || c.DataType === 6 || c.DataType === 9) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format === 'time') {
            row[c.Name] = parseInt(val / 60) + ':' + (val % 60)
          } else if (format === 'ratio') {
            row[c.Name] = val + '%'
          }
        } else if (c.DataType === 7) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format == null) {
            row[c.Name] = moment(val).format('YYYY-MM-DD HH:mm')
          } else {
            row[c.Name] = moment(val).format(format)
          }
        } else if (c.DataType === 8) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format == null) {
            row[c.Name] = moment(val).format('YYYY-MM-DD')
          } else {
            row[c.Name] = moment(val).format(format)
          }
        }
      })
      return row
    }
  }
}
</script>
